import React from 'react';
import { Button, Space, Avatar, Dropdown } from 'antd';
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
import styles from './Header.module.css';

const Header = () => {
    const userMenuItems = [
        {
            key: 'profile',
            icon: <UserOutlined />,
            label: '个人资料',
        },
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: '设置',
        },
        {
            type: 'divider',
        },
        {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: '退出登录',
            danger: true,
        },
    ];

    const handleUserMenuClick = ({ key }) => {
        console.log(`点击了 ${key}`);
    };

    return (
        <header className={styles.header}>
            <div className={styles.leftSection}>
                <h1 className={styles.logo}>控制台</h1>
            </div>

            <div className={styles.rightSection}>
                <Space>
                    <Dropdown
                        menu={{
                            items: userMenuItems,
                            onClick: handleUserMenuClick,
                        }}
                        placement="bottomRight"
                        trigger={['click']}
                    >
                        <Button type="text" className={styles.userButton}>
                            <Space>
                                <Avatar size="small" icon={<UserOutlined />} />
                                <span>管理员</span>
                            </Space>
                        </Button>
                    </Dropdown>
                </Space>
            </div>
        </header>
    );
};

export default Header;